<template>
  <div class="knowledge-container">
    <!-- 头部 -->
    <div class="knowledge-header">
      <div class="header-left">
        <h2><el-icon class="header-icon"><Collection /></el-icon>知识库管理</h2>
        <p class="header-desc">管理您的知识库资源，支持文档上传和检索</p>
      </div>
      <el-button type="primary" class="create-btn" @click="dialogVisible = true">
        <el-icon><Plus /></el-icon>新建知识库
      </el-button>
    </div>
    
    <!-- 统计卡片 -->
    <div class="stat-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><FolderOpened /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ knowledgeList.length }}</div>
          <div class="stat-label">知识库总数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><Files /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ getTotalFiles() }}</div>
          <div class="stat-label">文件总数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><Calendar /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ new Date().toLocaleDateString() }}</div>
          <div class="stat-label">今日日期</div>
        </div>
      </div>
    </div>
    
    <!-- 知识库列表 - 卡片视图 -->
    <div v-loading="loading" class="knowledge-cards">
      <transition-group name="card-list">
        <div v-for="item in knowledgeList" :key="item.id" class="knowledge-card">
          <div class="card-header">
            <el-icon><Document /></el-icon>
            <h3>{{ item.knowledgeName }}</h3>
          </div>
          <div class="card-content">
            <p class="card-desc">{{ item.description || '暂无描述' }}</p>
            <div class="card-meta">
              <span><el-icon><Files /></el-icon> {{ item.fileCount }} 个文件</span>
              <span><el-icon><Calendar /></el-icon> {{ item.createTime }}</span>
            </div>
          </div>
          <div class="card-actions">
            <el-tooltip content="查看详情" placement="top">
              <el-button circle @click="viewKnowledge(item)">
                <el-icon><View /></el-icon>
              </el-button>
            </el-tooltip>
            <el-tooltip content="删除知识库" placement="top">
              <el-button circle type="danger" @click="deleteKnowledge(item)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </el-tooltip>
          </div>
        </div>
      </transition-group>
      
      <!-- 空状态 -->
      <div v-if="knowledgeList.length === 0" class="empty-state">
        <el-icon><Collection /></el-icon>
        <p>暂无知识库，点击"新建知识库"按钮创建</p>
      </div>
      
      <!-- 分页组件 -->
      <div v-if="total > 0" class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    
    <!-- 知识库详情对话框 -->
    <el-dialog v-model="detailDialogVisible" :title="`知识库详情 - ${currentKnowledge.knowledgeName}`" width="70%" class="detail-dialog">
      <div v-loading="detailLoading" class="detail-content">
        <!-- 知识库基本信息 -->
        <div class="knowledge-info">
          <div class="info-item">
            <span class="info-label">知识库名称：</span>
            <span class="info-value">{{ currentKnowledge.knowledgeName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">知识库编码：</span>
            <span class="info-value">{{ currentKnowledge.knowledgeCode }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">描述信息：</span>
            <span class="info-value">{{ currentKnowledge.description || '暂无描述' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">文件数量：</span>
            <span class="info-value">{{ currentKnowledge.fileCount }} 个</span>
          </div>
          <div class="info-item">
            <span class="info-label">创建时间：</span>
            <span class="info-value">{{ currentKnowledge.createTime }}</span>
          </div>
        </div>
        
        <!-- 文件列表 -->
        <div class="files-section">
          <h3><el-icon><Files /></el-icon>文件列表</h3>
          <div v-if="knowledgeFiles.length === 0" class="empty-files">
            <el-icon><Document /></el-icon>
            <p>该知识库暂无文件</p>
          </div>
          <div v-else class="files-list">
            <div v-for="file in knowledgeFiles" :key="file.id" class="file-item">
              <div class="file-info">
                <el-icon class="file-icon"><Document /></el-icon>
                <div class="file-details">
                  <div class="file-name">{{ file.fileName }}</div>
                  <div class="file-meta">
                    <span class="file-size">{{ formatFileSize(file.fileSize) }}</span>
                    <span class="file-type">{{ file.fileType }}</span>
                    <span class="file-time">{{ formatTime(file.createTime) }}</span>
                  </div>
                </div>
              </div>
              <div class="file-actions">
                <el-tooltip content="查看文件" placement="top">
                  <el-button circle size="small" type="primary" @click="viewFile(file)">
                    <el-icon><View /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="删除文件" placement="top">
                  <el-button circle size="small" type="danger" @click="deleteFile(file)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    
    <!-- 文件内容查看对话框 -->
    <el-dialog v-model="fileContentDialogVisible" :title="`文件内容 - ${currentFile.fileName}`" width="80%" class="file-content-dialog">
      <div v-loading="fileContentLoading" class="file-content-container">
        <div v-if="fileContent" class="file-content">
          <pre class="content-text">{{ fileContent }}</pre>
        </div>
        <div v-else class="empty-content">
          <el-icon><Document /></el-icon>
          <p>暂无文件内容</p>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="fileContentDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 新建知识库对话框 -->
    <el-dialog v-model="dialogVisible" title="新建知识库" width="500px" class="custom-dialog">
      <el-form :model="knowledgeForm" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="knowledgeForm.knowledgeName" placeholder="请输入知识库名称" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="knowledgeForm.description" type="textarea" placeholder="请输入知识库描述" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="createKnowledgeItem" class="confirm-btn">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Collection, Document, Files, FolderOpened, View, Delete, Calendar, Download } from '@element-plus/icons-vue'
import { getKnowledgeList, createKnowledge, deleteKnowledge as deleteKnowledgeApi, getKnowledgeFilesByCode, getFileContent, deleteKnowledgeFile } from '@/api/knowledge'

const loading = ref(false)
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const detailLoading = ref(false)

// 分页参数
const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})

// 知识库表单
const knowledgeForm = reactive({
  knowledgeName: '',
  description: ''
})

// 知识库列表
const knowledgeList = ref([])

// 当前查看的知识库
const currentKnowledge = ref({})

// 知识库文件列表
const knowledgeFiles = ref([])

// 文件内容查看相关
const fileContentDialogVisible = ref(false)
const fileContentLoading = ref(false)
const currentFile = ref({})
const fileContent = ref('')

// 计算文件总数
const getTotalFiles = () => {
  return knowledgeList.value.reduce((total, item) => total + (item.fileCount || 0), 0)
}

// 获取知识库列表
const fetchKnowledgeList = async () => {
  try {
    loading.value = true
    const params = {
      page: pagination.page,
      pageSize: pagination.pageSize
    }
    
    const response = await getKnowledgeList(params)
    
    if (response.code === 1 && response.data) {
      // 根据后端返回的PageResult格式处理数据
      const { total, records } = response.data
      pagination.total = total
      
      // 处理知识库数据，适配前端显示格式
      knowledgeList.value = records.map(item => ({
        id: item.id,
        knowledgeCode: item.knowledgeCode,
        name: item.knowledgeName || '未命名知识库',
        description: item.description || '暂无描述',
        fileCount: item.fileCount || 0,
        status: item.status,
        createTime: item.updateTime ? new Date(item.updateTime).toLocaleDateString() : '未知时间',
        updateTime: item.updateTime
      }))
    } else {
      ElMessage.error(response.msg || '获取知识库列表失败')
    }
  } catch (error) {
    console.error('获取知识库列表失败:', error)
    ElMessage.error('获取知识库列表失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 查看知识库
const viewKnowledge = async (row) => {
  try {
    currentKnowledge.value = row
    detailDialogVisible.value = true
    detailLoading.value = true
    
    // 调用API获取该知识库的文件列表
    const response = await getKnowledgeFilesByCode(row.knowledgeCode)
    
    if (response.code === 1 && response.data) {
      knowledgeFiles.value = response.data
    } else {
      knowledgeFiles.value = []
      ElMessage.error(response.msg || '获取文件列表失败')
    }
  } catch (error) {
    console.error('获取知识库文件列表失败:', error)
    knowledgeFiles.value = []
    ElMessage.error('获取文件列表失败，请稍后重试')
  } finally {
    detailLoading.value = false
  }
}

// 删除知识库
const deleteKnowledge = async (row) => {
  try {
    await ElMessageBox.confirm(`确认删除知识库"${row.knowledgeName}"吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    loading.value = true
    const response = await deleteKnowledgeApi(row.knowledgeCode)
    
    if (response.code === 1) {
      ElMessage({
        message: '删除成功',
        type: 'success',
        customClass: 'custom-message'
      })
      // 重新获取列表
      await fetchKnowledgeList()
    } else {
      ElMessage.error(response.msg || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除知识库失败:', error)
      ElMessage.error('删除失败，请稍后重试')
    }
  } finally {
    loading.value = false
  }
}

// 创建知识库
const createKnowledgeItem = async () => {
  if (!knowledgeForm.knowledgeName.trim()) {
    ElMessage({
      message: '请输入知识库名称',
      type: 'warning',
      customClass: 'custom-message'
    })
    return
  }
  
  try {
    loading.value = true
    const response = await createKnowledge({
      knowledgeName: knowledgeForm.knowledgeName.trim(),
      description: knowledgeForm.description.trim()
    })
    
    if (response.code === 1) {
      ElMessage({
        message: '创建成功',
        type: 'success',
        customClass: 'custom-message'
      })
      dialogVisible.value = false
      
      // 重置表单
      knowledgeForm.knowledgeName = ''
      knowledgeForm.description = ''
      
      // 重新获取列表
      await fetchKnowledgeList()
    } else {
      ElMessage.error(response.msg || '创建失败')
    }
  } catch (error) {
    console.error('创建知识库失败:', error)
    ElMessage.error('创建失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 分页处理方法
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  fetchKnowledgeList()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchKnowledgeList()
}

// 页面挂载时获取数据
onMounted(() => {
  fetchKnowledgeList()
})

// 格式化文件大小
const formatFileSize = (size) => {
  if (!size) return '0 B'
  if (size < 1024) {
    return size + ' B'
  } else if (size < 1024 * 1024) {
    return (size / 1024).toFixed(1) + ' KB'
  } else {
    return (size / (1024 * 1024)).toFixed(1) + ' MB'
  }
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return '未知时间'
  return new Date(time).toLocaleString()
}

// 查看文件
const viewFile = async (file) => {
  try {
    currentFile.value = file
    fileContentDialogVisible.value = true
    fileContentLoading.value = true
    fileContent.value = ''
    
    // 调用API获取文件内容
    const response = await getFileContent(file.fileName)
    
    if (response.code === 1 && response.data) {
      fileContent.value = response.data

    } else {
      ElMessage.error(response.msg || '获取文件内容失败')
      ElMessage.error('获取文件内容失败')
    }
  } catch (error) {
    console.error('获取文件内容失败:', error)
    isImageContent.value = false
    ElMessage.error('获取文件内容失败，请稍后重试')
  } finally {
    fileContentLoading.value = false
  }
}

/**
 * 删除文件
 * @param {Object} file - 要删除的文件对象
 */
const deleteFile = async (file) => {
  try {

    await ElMessageBox.confirm(`确认删除文件"${file.fileName}"吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 显示加载状态
    detailLoading.value = true
    
    // 确保fileId是数字类型
    const fileId = parseInt(file.id)
    if (isNaN(fileId)) {
      ElMessage.error('文件ID格式错误')
      return
    }
    
    // 调用删除文件API，传递文件ID和知识库编码
    const response = await deleteKnowledgeFile(fileId)
    
    if (response.code === 1) {
      ElMessage({
        message: '文件删除成功',
        type: 'success',
        customClass: 'custom-message'
      })
      
      // 重新获取文件列表
      await viewKnowledge(currentKnowledge.value)
    } else {
      ElMessage.error(response.msg || '删除文件失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除文件失败:', error)
      console.error('错误详情:', {
        message: error.message,
        response: error.response?.data,
        status: error.response?.status,
        config: error.config
      })

    }
  } finally {
    detailLoading.value = false
  }
}
</script>

<style scoped>
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.knowledge-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.knowledge-container::-webkit-scrollbar {
  width: 6px;
}

.knowledge-container::-webkit-scrollbar-thumb {
  background-color: var(--el-color-primary-light-5);
  border-radius: 3px;
}

.knowledge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.header-left {
  display: flex;
  flex-direction: column;
}

.header-left h2 {
  display: flex;
  align-items: center;
  font-size: 22px;
  margin: 0;
  color: var(--el-color-primary);
}

.header-icon {
  margin-right: 8px;
  font-size: 24px;
}

.header-desc {
  margin: 5px 0 0;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.create-btn {
  transition: transform 0.2s;
}

.create-btn:hover {
  transform: scale(1.05);
}

/* 统计卡片样式 */
.stat-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
}

.stat-card {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--el-color-primary-light-8);
  margin-right: 15px;
}

.stat-icon .el-icon {
  font-size: 24px;
  color: var(--el-color-primary);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-color-primary-dark-2);
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

/* 知识库卡片列表 */
.knowledge-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.knowledge-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s;
}

.knowledge-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background: var(--el-color-primary-light-9);
  border-bottom: 1px solid var(--el-border-color-light);
}

.card-header .el-icon {
  font-size: 18px;
  color: var(--el-color-primary);
  margin-right: 10px;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: var(--el-color-primary-dark-2);
}

.card-content {
  padding: 15px;
}

.card-desc {
  margin: 0 0 15px;
  color: var(--el-text-color-regular);
  font-size: 14px;
  line-height: 1.5;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  color: var(--el-text-color-secondary);
  font-size: 13px;
}

.card-meta span {
  display: flex;
  align-items: center;
}

.card-meta .el-icon {
  margin-right: 5px;
  font-size: 14px;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 10px 15px;
  border-top: 1px solid var(--el-border-color-light);
  gap: 10px;
}

/* 卡片列表动画 */
.card-list-enter-active,
.card-list-leave-active {
  transition: all 0.5s ease;
}

.card-list-enter-from,
.card-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  grid-column: 1 / -1;
  color: var(--el-text-color-secondary);
}

.empty-state .el-icon {
  font-size: 48px;
  margin-bottom: 15px;
  color: var(--el-color-info-light-5);
}

/* 对话框样式 */
:deep(.custom-dialog) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.custom-dialog .el-dialog__header) {
  background: var(--el-color-primary-light-9);
  margin: 0;
  padding: 15px 20px;
}

:deep(.custom-dialog .el-dialog__title) {
  color: var(--el-color-primary-dark-2);
  font-weight: bold;
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 20px;
}

:deep(.custom-dialog .el-dialog__footer) {
  border-top: 1px solid var(--el-border-color-light);
  padding: 15px 20px;
}

.confirm-btn {
  background: var(--el-color-primary);
  transition: all 0.3s;
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 消息提示自定义样式 */
:deep(.custom-message) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 知识库详情弹窗样式 */
:deep(.detail-dialog) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.detail-dialog .el-dialog__header) {
  background: var(--el-color-primary-light-9);
  margin: 0;
  padding: 15px 20px;
}

:deep(.detail-dialog .el-dialog__title) {
  color: var(--el-color-primary-dark-2);
  font-weight: bold;
}

:deep(.detail-dialog .el-dialog__body) {
  padding: 20px;
}

.detail-content {
  min-height: 400px;
}

/* 知识库基本信息样式 */
.knowledge-info {
  background: var(--el-color-primary-light-9);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-weight: bold;
  color: var(--el-text-color-primary);
  min-width: 100px;
  margin-right: 10px;
}

.info-value {
  color: var(--el-text-color-regular);
  flex: 1;
}

/* 文件列表样式 */
.files-section {
  margin-top: 20px;
}

.files-section h3 {
  display: flex;
  align-items: center;
  margin: 0 0 15px;
  color: var(--el-color-primary-dark-2);
  font-size: 16px;
}

.files-section h3 .el-icon {
  margin-right: 8px;
  font-size: 18px;
}

.empty-files {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: var(--el-text-color-secondary);
}

.empty-files .el-icon {
  font-size: 48px;
  margin-bottom: 15px;
  color: var(--el-color-info-light-5);
}

.files-list {
  max-height: 400px;
  overflow-y: auto;
}

.files-list::-webkit-scrollbar {
  width: 6px;
}

.files-list::-webkit-scrollbar-thumb {
  background-color: var(--el-color-primary-light-5);
  border-radius: 3px;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
  margin-bottom: 10px;
  background: white;
  transition: all 0.3s;
}

.file-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.file-item:last-child {
  margin-bottom: 0;
}

.file-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.file-icon {
  font-size: 24px;
  color: var(--el-color-primary);
  margin-right: 15px;
}

.file-details {
  flex: 1;
}

.file-name {
  font-weight: bold;
  color: var(--el-text-color-primary);
  margin-bottom: 5px;
  font-size: 14px;
}

.file-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.file-meta span {
  display: flex;
  align-items: center;
}

.file-size {
  color: var(--el-color-success);
  font-weight: 500;
}

.file-type {
  color: var(--el-color-warning);
  font-weight: 500;
}

.file-time {
  color: var(--el-text-color-secondary);
}

.file-actions {
  display: flex;
  gap: 8px;
}

.file-actions .el-button {
  transition: all 0.3s;
}

.file-actions .el-button:hover {
  transform: scale(1.1);
}

/* 文件内容查看弹窗样式 */
:deep(.file-content-dialog) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.file-content-dialog .el-dialog__header) {
  background: var(--el-color-primary-light-9);
  margin: 0;
  padding: 15px 20px;
}

:deep(.file-content-dialog .el-dialog__title) {
  color: var(--el-color-primary-dark-2);
  font-weight: bold;
}

:deep(.file-content-dialog .el-dialog__body) {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

:deep(.file-content-dialog .el-dialog__footer) {
  border-top: 1px solid var(--el-border-color-light);
  padding: 15px 20px;
}

.file-content-container {
  min-height: 400px;
}

.file-content {
  background: var(--el-color-info-light-9);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid var(--el-border-color-light);
}

.content-text {
  margin: 0;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  color: var(--el-text-color-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 500px;
  overflow-y: auto;
}

.content-text::-webkit-scrollbar {
  width: 6px;
}

.content-text::-webkit-scrollbar-thumb {
  background-color: var(--el-color-primary-light-5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: var(--el-text-color-secondary);
}

.empty-content .el-icon {
  font-size: 48px;
  margin-bottom: 15px;
  color: var(--el-color-info-light-5);
}
</style>